<template>
    <div>
        <nav-bar></nav-bar>
        <div class="classify">
            <el-row type="flex" justify="center">
                <el-col :span="14">
                    <el-card class="card-button">
                        <el-form>
                            <el-form-item>
                                <el-col :span="2">
                                    <p class="type">频道</p>
                                </el-col>
                                <el-col :span="22" class="type-button">
                                    <el-button
                                            size="mini" round v-for="(item,i) in type" style="color: #BEBEBE" :key="i"
                                            :class="{buttonBak: activeIndex === i}"  :name="item.typeName"
                                            @click="select(i)">
                                        {{item.typeValue}}
                                    </el-button>
                                </el-col>
                            </el-form-item>
                            <el-form-item>
                                <el-col :span="2">
                                    <p class="type">类型</p>
                                </el-col>
                                <el-col :span="22" class="type-button" v-for="item in type" v-if="item.typeName === changeType">
                                    <el-button size="mini" round v-for="(item2,i) in secondType" v-if="item2.parentType === item.typeName" style="color: #BEBEBE" :key="i"
                                               :class="{buttonBak: activeIndex2 === i}"
                                               @click="select2(i)">
                                        {{item2.typeValue}}
                                    </el-button>
                                </el-col>
                            </el-form-item>
                        </el-form>
                    </el-card>
                </el-col>
            </el-row>

            <el-row type="flex" justify="center" style=" padding-top: 30px;">
                <el-col :span="14">
                    <el-card >  <!--所有书籍信息卡片-->
                        <el-col :span="8" v-for="(books,key) in bookList" :key="key">
                            <!--单本书籍信息卡片-->
                            <el-card  :body-style="{ padding: '15px' }" class="book-card" shadow="never">
                                <el-col :span="12">
                                    <el-link :underline="false" :title="books.title">
                                        <el-image :src="books.coverPicUrl" @click="GoToDetail(books)"></el-image>
                                    </el-link>
                                </el-col>
                                <el-col :span="12" type="flex" justify="center">
                                    <h3 class="book-title">
                                        <el-link :underline="false" @click="GoToDetail(books)">
                                            {{books.bookName}}
                                        </el-link>
                                    </h3>
                                    <p :title="books.content">{{books.content}}</p>
                                </el-col>
                            </el-card>
                        </el-col>

                        <el-col>
                            <p>{{getBookResult}}</p>
                        </el-col>
                    </el-card>
                </el-col>


            </el-row>

            <el-row type="flex" justify="center" style=" padding-top: 30px;">
                <el-pagination
                        background
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="pageSizes"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-row>
        </div>

        <cus-footer></cus-footer>
    </div>
</template>

<script>
    import NavBar from "../common/NavBar";
    import Footer from "../common/Footer";

    export default {
        name: "Classify",
        components:{
            'nav-bar': NavBar,
            'cus-footer': Footer,
        },
        data() {
            return {
                activeIndex : 0, //频道按钮组下标
                activeIndex2: -1, //类型按钮组下标
                changeType: '', //类型根据频道变化
                getBookResult: "",
                type:[],
                secondType:[],
                bookList: [],
                total: 0,
                currentPage: 1, //默认分页页数
                pageSizes: [6, 9, 12, 15, 18 ], //分页个数选择器
                pageSize : 9 //每页展示条数
            }
        },
        methods: {
            select(i){ //频道点击事件
                this.getBookResult = "";
                this.activeIndex = i;
                this.activeIndex2 = -1;
                this.changeType = this.type[i].typeName;
                this.getClassifiedBookList(1, this.pageSize, {type: this.type[i].typeValue}, this.type[i]);
            },
            select2(i){//类型点击事件
                this.getBookResult = "";
                this.activeIndex2 = i;
                this.getClassifiedBookList(1, this.pageSize, {type: this.secondType[i].typeValue}, null);
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.currentPage = 1;
                if (this.activeIndex2 === -1){
                    this.getClassifiedBookList(this.currentPage, this.pageSize, {type: this.type[this.activeIndex].typeValue}, this.type[this.activeIndex]);
                }else {
                    this.getClassifiedBookList(this.currentPage, this.pageSize, {type: this.secondType[this.activeIndex2].typeValue}, null);
                }
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                if (this.activeIndex2 === -1){
                    this.getClassifiedBookList(this.currentPage, this.pageSize, {type: this.type[this.activeIndex].typeValue}, this.type[this.activeIndex]);
                }else {
                    this.getClassifiedBookList(this.currentPage, this.pageSize, {type: this.secondType[this.activeIndex2].typeValue}, null);
                }
            },
            getBookType(){
                this.$axios.get('/getBookType')
                    .then(response => {
                        if(response.data.success){
                            //取得的标签进行分类
                            this.handleBookType(response.data.data);
                        }
                    }).catch(error => {
                    console.log(error);
                });
            },
            handleBookType(data){
                for (let i = 0 ; i<data.length ; i++ ) {
                    //一级标签
                    if (data[i].typeLevel === 1){
                        this.type.push(JSON.parse(JSON.stringify(data[i])));
                    }
                    //二级标签
                    if (data[i].typeLevel === 2){
                        this.secondType.push(JSON.parse(JSON.stringify(data[i])));
                    }
                }
                this.changeType = this.type[0].typeName;
                //获取书签类型后默认第一个类型进行书籍信息初始化
                this.getClassifiedBookList(1, 9, {type: this.type[0].typeValue}, this.type[0]);
                console.log(this.type);
                console.log(this.secondType);
            },
            getClassifiedBookList(currentPage, pageSize, searchParam, bookType){
                var params = new URLSearchParams();
                if (bookType != null){
                    params.append('typeName', bookType.typeName);
                    params.append('typeLevel', bookType.typeLevel);
                }
                this.$axios.post('/getClassifiedBooksByPage',
                    {currentPage: currentPage, pageSize: pageSize, searchParam: searchParam},
                    {params:params})
                    .then(response => {
                        if (response.data.success) {
                            this.total = response.data.data.total;
                            this.currentPage = response.data.data.currentPage;
                            this.bookList = response.data.data.records;
                            console.log(this.bookList);
                            if (this.total === 0) {
                                this.getBookResult = "暂无该类别书籍信息！"
                            }
                        }else{
                            alert("获取书籍信息失败！");
                        }
                    }).catch(error => {
                        console.log(error);
                    })
            },
            GoToDetail:function (book) {
                //将书籍信息放入路由的参数中
                this.$router.push({name: "detail", params: {bookInfo: book}});
                // this.$nextTick(function () {
                //     VueEvent.$emit('transmitbookinfo',book);
                // })
            }
        },
        mounted() {
            //挂载时请求服务器获取书签数据
            this.getBookType();
        }
    }
</script>

<style scoped>
    .classify {
        background-color: #f0f0f0;
        padding-top: 70px;
    }
    .card-button {
        padding: 0 46px;
    }
    .type {
        float: left;
        line-height: 80px;
        margin: 0 10px;
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        font-size: 20px;
        color: #ccc;
    }
    .type-button {
        line-height: 80px;
        border-bottom: 1px solid #f0f0f0;
    }
    .buttonBak {
        background: #9e9e9e;
        outline: none;
    }
    .book-card{
        height: 180px;
        border-radius: 0;
        margin-bottom: 30px;
        margin-top: 16px;
        border-style: none;
    }
    .book-card p{
        margin-top: 35px;
        font-size: 12px;
        color: #9e9e9e;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp: 3;
    }
    .book-title{
        height: 27px;
        border-bottom: 1px solid #f0f0f0;
        margin-top: 0px;
    }
    .el-link.el-link--default{
        font-size: 14px;
    }
</style>